<template>

  <div>
     <van-skeleton :loading="loading" title :row="4" >
    <van-tabs @click="onClick" scrollspy sticky>
      <van-tab class="sangpin" title="商品">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#605962">
          <van-swipe-item class="s">
            <viewer><img :src="all_data.display_diagram" alt=""/>
          </viewer></van-swipe-item>
        </van-swipe>
        <div @click="jump" class="sangpin1" style="margin-top: 1rem">
          <!-- 标题 -->
          <h2 class="fontSize-l">{{ all_data.cakename }}</h2>
          <!-- 价格 -->
          <p class="fontSize-l" style="color:#c4a163">￥{{ all_data.cake_price }}</p>
          <span>
            <div>
              <h4>aha会员尊享多重礼遇</h4>
              <h4>开通仅¥99 预计可省¥358</h4>
            </div>
            <div>￥99开通 <i class="iconfont">&#xe624;</i></div>
          </span>
        </div>
        <div class="sangpin2 fontColor">
          <div >
            <p @click="dian" class="fontSize-s">
              已选规格: {{ specs
              }}<i
                style="float: right; display: block; right: 0px"
                class="iconfont"
                >&#xe624;</i
              >
            </p>
          </div>
          <p class="fontSize-s">慕斯蛋糕</p>
          <p class="fontSize-s">
            甜度 <van-rate v-model="value" disabled disabled-color="#ee0a24" />
          </p>
        </div>
        <!-- 小隔离 -->
        <div class="dao"></div>
        <div class="tupian"><img src="img/1.jpg" alt="" /></div>
      </van-tab>
      <!-- 评论开始 -->
      <!-- 小隔离 -->
      <div class="dao"></div>
      <div class="comments1">
        <van-tab class="comments" title="评论">
          <div>
            <ul>
              <li v-for="item in comment" :key="item.huojianid">
                <div><span>{{item.uname}}</span><span>{{item.time}}</span></div>
                <p>
                 {{item.comment_content}}
                </p>
              </li>
            </ul>
          </div>
        </van-tab>
      </div>
      <p class="link">
        <router-link style="color: orange" :to="`/comment?name=${namess}`"
          >查看更多的评论</router-link
        >
      </p>
      <!-- 详情 -->
      <van-tab class="detail" title="详情">
        <!-- 小隔离 -->
        <div class="dao"></div>
        <div><img :src="all_data.long_graph" alt="" /></div>
      </van-tab>
      <!-- 换购 -->
      <van-tab replace title="换购"> ss </van-tab>
      <!-- 换购里面的内容 -->
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '83%' }"
      >
        <div class="limian">
          <h3 class="fontSize-s">建议食用人数</h3>
          <p>
           <b class="fontSize-s fontColor-gray"> {{ specs }}含{{ tableware }}套餐具</b> <span class="fontSize-l">￥{{ price }}</span>
          </p>
          <van-tabbar v-model="active" active-color="#fff"  style="margin-top:1rem;">
            <van-tabbar-item name="1">2-4人吃&nbsp;&nbsp;~405克</van-tabbar-item>
            <van-tabbar-item name="2">5-8人吃&nbsp;&nbsp;~650克</van-tabbar-item>
            <van-tabbar-item name="3">10-12人吃&nbsp;~1060克</van-tabbar-item>
            <van-tabbar-item name="4">15-20人吃&nbsp;~2185克</van-tabbar-item>
          </van-tabbar>
          <p>- BOOM! 开盒有惊喜 -</p>
          <div class="flex">
            <img src="img/4.jpg" alt="" />
            <img src="img/3.png" alt="" style="height:70px;width:210px"/>
          </div>
          <p>- 派对必备 欢喜加倍 -</p>
        </div>
        <div class="nav">
          <button @click="$router.push(`/buy?id=${id}`)">立即购买</button>
          <button @click="join($route.query.id)">加入购物车</button>
        </div>
      </van-popup>
    </van-tabs>
    <!-- 回到顶部 -->
    <div @click="top" class="peaked"></div>
    <!-- 底部导航栏 -->
    <div class="underside">
      <div>
        <ul>
          <li @click="$router.go(-1)" class="iconfont">&#xeb15;</li>
          <li @click="customer" class="iconfont">&#xec2e;</li>
          <li @click="$router.push('/card')" class="iconfont">&#xe73e;</li>
          <van-badge :content="num == 0 ? null : num">
            <div class="child" />
          </van-badge>
        </ul>
      </div>
      <button @click="join($route.query.id)">加入购物车</button>
    </div>
     </van-skeleton>
  </div>
</template>
<script>
export default {
  
  created() {
    // let params = {pname}
    // 上面的导航栏中的名字
    let namess = { names: this.$route.query.name };
    this.namess = this.$route.query.name
    this.id= this.$route.query.id
    this.$get("/v1/detail/Detail_name", namess).then((res) => {
    //console.log(res.data.data);
      this.all_data = res.data.data[0];
      this.value = res.data.data[0].sweet_degree;
      this.price = res.data.data[0].cake_price;
      this.prices = res.data.data[0].cake_price;
         this.loading=false
    });
    //获取到评论内容
    this.$post("/v1/detail/comment", namess).then((res) => {
      // console.log(res.data.data);
       this.comment=res.data.data
      // console.log("dsfasfdfdsfffdfsffsdfdsfdfdsfd")
    });
   
  },
  data() {
    return {
      //接收数值
      ss:2,
      active:"1",
      value: 3, //甜度的值
      show: false,
      num: 0,
      // 蛋糕的名称
      namess:null,
      //蛋糕的id
      id:null,
      // 购物车的值
      shopping: false,
      //获取到所有的数据
      all_data: [],
      //蛋糕的规格
      specs: "13*13*4cm",
      //蛋糕的餐具
      tableware: 5,
      //蛋糕的价格
      price: 258,
      prices: null,
      //规格的id
      sid: null,
      //评论的内容
      comment:null,
      //骨架屏的显示
       loading: true
    };
  },
  beforeCreate() {
    window.scrollTo(0, 0);
  },
  beforeMount() {
    let count = localStorage.getItem("count");
    this.num = count;
  },
  methods: {
    // 点击跳转到vip页面
    jump() {
      this.$router.push(`/vip`);
    },
    customer() {
      this.$router.push("/customer?sendId=3");
    },
    showPopup() {
      this.show = true;
    },
    dian() {
      this.show = true;
    },
    // 加入购物车的提示按钮
    join(i) {
      let token = localStorage.getItem("token");
      if(token==null){
        this.$dialog({
          message: "不好意思您还没有登录吧",
        }).then(() => {
          this.$router.push(`/usercenter`);
        });;
      }else{
        let params = { product_id: i, token: token };
        this.$get(`/v1/card/add`, params).then((res) => {
          if(res.data.msg=="用户登录状态已过期"){
            this.$dialog({
              title: "请重新登录",
              message: "您的登录状态已过期",
            }).then(()=>{
              this.$router.push('/usercenter');
            })
          }else{
            this.$dialog({
            title: "蛋糕",
            message: "添加成功",
            });
            let newproduct = JSON.stringify(res.data.data);
            let newcount = res.data.data.length;
            this.num = newcount;
            localStorage.setItem("product", newproduct);
            localStorage.setItem("count", newcount);
          }
        });
      }
     
    },
    // 慢慢回到顶部的实现
    top() {
      var scrollToTop = setInterval(function () {
        var pos = window.pageYOffset;
        if (pos > 0) {
          window.scrollTo(0, pos - 20);
        } else {
          window.clearInterval(scrollToTop);
        }
      }, 1);
    },
    onClick(title) {
    //console.log(title);
      if (title == 3) {
      //console.log("sdfas");
        var scrollDistance =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      //console.log(scrollDistance);
        this.show = true;
      }
    },

  },
  //监视watch的值然后然他变成要的规格
  watch: {
    active(newValue, oldValue) {
      if ((newValue*1) == 1) {
        this.specs = "13*13*4cm";
        this.tableware = 5;
        this.price = this.prices;
        this.sid = 1;
      }
      if ((newValue*1)  == 2) {
        this.specs = "17*17*4cm";
        this.tableware = 10;
        this.price = 398;
        this.sid = 2;
      }
      if ((newValue*1) == 3) {
        this.specs = "22*22*4cm";
        this.tableware = 15;
        this.price = 598;
        this.sid = 3;
      }
      if ((newValue*1) == 4) {
        this.specs = "31*31*4cm";
        this.tableware = 20;
        this.price = 998;
        this.sid = 4;
      }
    }
  },
// 挂载结束

};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.875rem;
}
//骨架屏的制作
.van-skeleton{
  padding: .625rem;
}
.van-skeleton__title:nth-of-type(1){
  width: 100%;
  height: 18rem;
  background-color: 	#FFEBCD;
}
.van-skeleton__row{
  height: 3rem;
  background-color: 	#FFEBCD;
}
.van-skeleton__row:nth-of-type(2){
  width: 100%;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.my-swipe .s {
  width: 100%;
  height: 20rem;
}
.sangpin {
  text-align: center;
}
.sangpin h3:nth-child(2) {
  color: #cfa563;
}
.sangpin span {
  display: block;
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: auto;
  margin-top: 1rem;
  height: 5rem;
  background-color: #f9f9f9;
  border-left: 0.2rem solid #e8380d;
}
.sangpin span div:nth-child(1) {
  margin-left: 1rem;
  color: #cfa563;
}
.sangpin span h4 {
  margin: 0px;
  line-height: 2.5rem;
}
.sangpin span h4:nth-child(2) {
  color: #3e3e3e;
}
.sangpin span div:nth-child(2) {
  height: 50%;
  margin-top: 1.2rem;
  margin-right: 1rem;
  padding-left: 1rem;
  line-height: 2.5rem;
  color: #cfa563;
  border-left: 0.1rem solid #cfa563;
}
.sangpin .sangpin1 h3 {
  text-align: center;
  margin-bottom: 1rem;
}
.sangpin .sangpin2 {
  margin: auto;
  margin-top: 0.4rem;
  width: 90%;
  height: 7rem;
  text-align: left;
}
.sangpin .sangpin2 p {
  padding: 0.3rem;
}
.sangpin .sangpin2 p:nth-child(1) {
  border-left: 0.2rem solid #e8380d;
  width: 100%;
}
.dao {
  width: 100%;
  height: 1rem;
  background-color: #f4f4f4;
}

.sangpin .tupian {
  overflow: hidden;
  width: 100%;
  height: 18rem;
  background-color: #ff4001;
}
//评论开始
.comments1 {
  white-space: nowrap;
  overflow-x: scroll;
  //取消滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}
.comments {
  width: 300%;
  overflow: scroll;
  overflow-x: hidden;
}
.comments div {
  width: 100%;
}

.comments > div ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0rem 1rem;
}
.comments > div ul li {
  width: 30%;
  height: 10rem;
  padding: 1rem;
  border: 0.1rem solid black;
  border-radius: 1rem;
  margin-right:1rem ;
}
.comments > div ul li p {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.comments > div ul li div {
  width: 100%;
  height: 2rem;
}
.comments > div ul li span:nth-child(1) {
  float: left;
  line-height: 2rem;
}
.comments > div ul li span:nth-child(2) {
  float: right;
  line-height: 2rem;
}
// 查看评论
.link {
  padding-top: 1rem;
  margin: auto;
  text-align: center;
}

//详情开始
.detail {
  width: 100%;
}
.detail img {
  display: block;
  width: 100%;
  height: 10re;
}
//弹窗里面
.limian {
  margin-top: 1rem;
  width: 90%;
  margin: auto;
}
.limian h3 {
  margin-top: 1.5rem;
}
.limian p:nth-of-type(1) {
  height: 3rem;
  width: 100%;
  line-height: 3rem;
}
.limian p:nth-of-type(1) span {
  font-size: 2rem;
  float: right;
  color: #cfa563;
}
.limian .specifications {
  margin-top: 2rem;
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: space-between;
}
.limian .specifications > div {
  width: 23%;
  height: 100%;
  background-color: #9c9c9c;
  color: white;
  text-align: center;
  font-weight: 400;
  h4{
    margin-top:0.3rem;
  }
}
.limian .specifications > div:hover {
  background-color: #ff4001;
}
.limian p:nth-of-type(2) {
  width: 100%;
  text-align: center;
  margin: 2rem 0rem 1rem 0rem;
}
// .limian div:nth-of-type(2) {
//   width: 100%;
//   position: relative;
// }
// .limian div:nth-of-type(2) img:nth-child(2) {
//   position: absolute;
//   top: 5rem;
//   right: 2rem;
//   width: 30%;
//   height: 25%;
// }
.limian p:nth-of-type(3) {
  width: 100%;
  padding: 1rem 0rem;
  text-align: center;
}
// .limian div:nth-of-type(3) {
//   width: 100%;
//   height: 10rem;
//   margin: auto;
// }
// .limian div:nth-of-type(3) ul {
//   width: 100%;
// }
// .limian div:nth-of-type(3) ul li {
//   position: relative;
//   width: 23%;
//   float: left;
//   height: 4rem;
//   padding: 0rem 0.2rem;
// }
// .limian div:nth-of-type(3) ul li img {
//   display: block;
//   width: 100%;
//   height: 80%;
// }
// .limian div:nth-of-type(3) ul li div {
//   position: absolute;
//   bottom: 15%;
//   right: 5%;
//   width: 15%;
//   height: 20%;
//   background-color: white;
// }
// .limian div:nth-of-type(3) ul li p {
//   padding: 0;
//   white-space: nowrap; /* 不换行 */
//   overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
//   text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与*/
// }
// .limian div:nth-of-type(3) ul li span {
//   font-size: 0.2rem;
// }
.nav {
  position: fixed;
  bottom: 0rem;
  width: 100%;
  height: 3rem;
  // border-top: 0.1rem solid #ff4001;
}
.nav button {
  width: 50%;
  height: 100%;
  border: 0rem;
}
.nav button:nth-child(1) {
  color: #ff4001;
}
.nav button:nth-child(2) {
  background-color: #ff4001;
  color: #ff4001;
  color: white;
}

//   底部导航栏开始
.underside {
  position: fixed;
  bottom: 0rem;
  width: 100%;
  height: 3rem;
}
.underside ul {
  float: left;
  display: flex;
  justify-content: space-between;
  width: 70%;
  height: 100%;
  background-color: white;
}
.underside ul li {
  width: 33%;
  height: 100%;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
}
//小小的弹出框
::v-deep .van-badge--fixed {
  top: 0.625rem;
  right: 1.875rem;
}
.underside button {
  float: right;
  display: block;
  width: 30%;
  height: 100%;
  background-color: #ff4001;
  color: white;
  border: 0px;
}
//回到顶部
.peaked {
  z-index: 1000;
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  width: 3rem;
  height: 3rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 50%;
  background: url(/img/7.png) no-repeat;
  background-size: 100%;
}
.fontSize-l{
  font-size:27px !important;
  font-weight: normal;
}
.fontSize-m{
  font-size:20px;
}
.fontSize-s{
  font-size:14px !important;
  font-weight: normal;
}
.fontColor{
  color:#3e3e3e !important;
}
.fontColor-gray{
  color:#9c9c9c !important;
}
.bgColor{
  color: #fff !important;
  background-color: #ff4001 !important;
}
.bgColor-gray{
  color: #fff !important;
  background-color: #9c9c9c !important;
}
.flex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.van-tabbar--fixed{
  position: relative;
  text-align: center;
}
.van-tabbar-item--active{
  background-color: #ff4001;
}
</style>
